<template>
  <div class="test-filter">
    <div class="filter" v-for="(filter, i) of filters" :key="i">
      <el-tag size="small">{{ filter.name }}</el-tag>
      <el-dropdown size="small" placement="bottom" @command="onSelectFunction">
        <el-tag size="small">{{ filter.functionText }}</el-tag>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="func of functions[filter.dataType]"
            :key="func.function"
            :command="{ filter, func }"
          >
            {{ func.text }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div
        class="values"
        :class="{ nobg: filter.function == 'between' }"
        v-if="filter.hasValue"
      >
        <template v-if="filter.dataType == 'string'">
          <el-tag
            size="small"
            v-for="(value, j) of filter.values"
            class="value"
            :key="value"
            closable
            @close="onValueDel(filter, j)"
            disable-transitions
          >
            {{ value }}
          </el-tag>
          <el-dropdown
            size="small"
            placement="bottom"
            @command="onValueAdd"
            trigger="click"
          >
            <el-input
              size="mini"
              v-model="filter.input"
              @blur="onInputAdd(filter)"
              placeholder="请选择或输入"
            ></el-input>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(option, k) of filter.options"
                :key="k"
                :command="{ filter, value: option.name }"
                :class="{ 'el-icon-check': countChecked(filter, option.name) }"
              >
                {{ option.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template v-if="filter.dataType == 'number'">
          <div v-if="filter.function == 'between'">
            <span style="margin-left: 5px">在</span>
            <el-input
              class="line"
              v-model="filter.values[0]"
              size="mini"
            ></el-input>
            <span>到</span>
            <el-input
              class="line"
              v-model="filter.values[1]"
              size="mini"
            ></el-input>
            <span style="margin-right: 5px">之间</span>
          </div>
          <el-input
            v-else
            size="mini"
            v-model="filter.values[0]"
            placeholder="请输入"
          ></el-input>
        </template>
        <template v-if="filter.dataType == 'time'">
          <el-time-picker
            size="mini"
            is-range
            v-model="filter.values"
            range-separator="至"
          >
          </el-time-picker>
        </template>
      </div>
      <el-tag
        class="el-icon-close close"
        size="small"
        @click="onDel(i)"
      ></el-tag>
    </div>
    <el-dropdown size="small" placement="bottom" @command="onAdd">
      <el-tag size="small" class="light el-icon-plus select">请选择</el-tag>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="p of propList" :key="p.id" :command="p">
          {{ p.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div style="margin-top: 30px">
      <el-button @click="submit">查看参数</el-button>
    </div>
  </div>
</template>
<script>
import util from "../util";
export default {
  data() {
    return {
      filters: [],
      propList: [
        {
          id: 28,
          name: "屏幕高度",
          code: "screen_height",
          type: 2,
          datatype: 0,
          isPreset: 1,
          descMessage: null,
          options:
            '[{"name":"780","code":""},{"name":"800","code":""},{"name":"896","code":""}]',
          distributions: "[]",
          createTime: "2021-07-05T11:31:03.000+0000",
        },
        {
          id: 30,
          name: "页面标题",
          code: "title",
          type: 2,
          datatype: 1,
          isPreset: 1,
          descMessage: null,
          options:
            '[{"name":"爱奇艺定向流量会员包","code":""},{"name":"秒杀抢好礼","code":""},{"name":"畅视菌的商城","code":""},{"name":"WO+视频爱奇艺定向流量包月","code":""},{"name":"畅视菌助你看球快乐！","code":""}]',
          distributions: "[]",
          createTime: "2021-07-05T11:31:03.000+0000",
        },
        {
          id: 12,
          name: "是否首次访问",
          code: "",
          type: 1,
          datatype: 2,
          isPreset: 0,
          descMessage: "",
          options: "[]",
          distributions: "[]",
          createTime: "2021-06-28T12:32:58.000+0000",
        },
        {
          id: 13,
          name: "触发时间",
          code: "",
          type: 1,
          datatype: 3,
          isPreset: 0,
          descMessage: "",
          options: "[]",
          distributions: "[]",
          createTime: "2021-06-28T12:32:58.000+0000",
        },
      ],
      dataTypeMap: {
        0: "number",
        1: "string",
        2: "boolean",
        3: "time",
      },
      functions: {
        number: [
          { function: "eq", text: "等于" },
          { function: "ne", text: "不等于" },
          { function: "lt", text: "小于" },
          { function: "le", text: "小于等于" },
          { function: "gt", text: "大于" },
          { function: "ge", text: "大于等于" },
          { function: "between", text: "区间" },
          { function: "isNotNull", text: "有值" },
          { function: "isNull", text: "无值" },
        ],
        string: [
          { function: "in", text: "包含" },
          { function: "notIn", text: "不包含" },
          { function: "isNotNull", text: "有值" },
          { function: "isNull", text: "无值" },
        ],
        boolean: [
          { function: "true", text: "是" },
          { function: "false", text: "否" },
          { function: "isNotNull", text: "有值" },
          { function: "isNull", text: "无值" },
        ],
        time: [
          { function: "between", text: "区间" },
          { function: "isNotNull", text: "有值" },
          { function: "isNull", text: "无值" },
        ],
      },
    };
  },
  created() {
    this.propList = this.propList.map((i) => ({
      ...i,
      options: JSON.parse(i.options),
    }));
  },
  methods: {
    submit() {
      let data = util.filterFields(this.filters, [
        "dataType",
        "field",
        "function",
        "name",
        "values",
      ]);
      console.log(JSON.parse(JSON.stringify(data)));
    },
    // 删除过滤条件时
    onDel(i) {
      this.filters.splice(i, 1);
    },
    // 计算可选值中被选中的项
    countChecked(filter, value) {
      return filter.values.includes(value);
    },
    // 删除可选值时
    onValueDel(filter, index) {
      filter.values.splice(index, 1);
    },
    // 输入可选值时
    onInputAdd(filter) {
      if (filter.input) {
        if (!filter.values.includes(filter.input)) {
          filter.values.push(filter.input);
        }
      }
      filter.input = "";
    },
    // 点击添加可选值时
    onValueAdd({ filter, value }) {
      if (!filter.values.includes(value)) {
        filter.values.push(value);
      }
    },
    // 选择过滤条件计算方式时
    onSelectFunction({ filter, func }) {
      filter.function = func.function;
      filter.functionText = func.text;
      let f = func.function;
      if (f == "isNull" || f == "isNotNull") {
        filter.hasValue = false;
      } else if (f == "true" || f == "false") {
        filter.hasValue = false;
      } else {
        filter.hasValue = true;
      }
    },
    // 添加新过滤条件
    onAdd(prop) {
      let dataType = this.dataTypeMap[prop.datatype];
      let hasValue = true;
      let f = this.functions[dataType][0].function;
      if (f == "isNull" || f == "isNotNull") {
        hasValue = false;
      } else if (f == "true" || f == "false") {
        hasValue = false;
      }
      let values = [];
      if (dataType == "number") {
        if (f == "between") {
          values = ["", ""];
        } else {
          values = [""];
        }
      } else if (dataType == "time") {
        values = [new Date(), new Date()];
      }
      this.filters.push({
        type: prop.isCommon ? "common" : "event",
        dataType,
        field: prop.code,
        name: prop.name,
        function: f,
        functionText: this.functions[dataType][0].text,
        values,
        hasValue,
        options: prop.options,
        input: "",
      });
    },
  },
};
</script>
<style lang="scss">
.test-filter {
  .filter {
    display: flex;
    width: 360px;
    transition: 0.5s;
    margin: 5px;
    border: 1px solid transparent;
    &:hover {
      border-color: #409eff;
    }
  }
  .el-tag {
    cursor: pointer;
    outline: none;
    margin: 2px;
    &.light {
      color: #66717c;
    }
    &.value {
      margin-left: 5px;
    }
    &.close {
      background-color: transparent;
      border: none;
    }
    &.select {
      margin-left: 7px;
    }
  }
  .values {
    background-color: #ecf5ff;
    border-radius: 4px;
    margin: 2px;
    font-size: 12px;
    &.nobg {
      background-color: transparent;
    }
    .el-tag {
      border: none;
      margin: 0;
    }
    .el-input__inner {
      width: 100px;
      outline: none;
      border: none;
      background-color: #ecf5ff;
      color: #409eff;
      height: 24px;
      line-height: 24px;
    }
    .line {
      width: 60px;
      .el-input__inner {
        width: 60px;
        background-color: transparent;
        border-bottom: 1px solid #409eff;
        border-radius: 0;
        padding: 0 5px;
        text-align: center;
      }
    }
    .el-range-editor {
      width: 200px;
    }
  }
}
</style>